<template>
  <div id="frend">
    <div class="headbox">{{name}}</div>
    <el-scrollbar ref="myScrollbar" style="height: 74%;" class="scrollbox">
        <div :class="item.left?'conbox':'conbox rightbox'" v-for="(item,index) in msgList" :key="index">
            <img class="reference" :src="item.imgurl" alt="">
            <div class="textbox">
                <span class="time">{{item.createdAt}}</span>
                <p v-html="item.message"></p>
            </div>
        </div>
        <!-- <div class="conbox rightbox">
            <img slot="reference" src="../assets/images/user2.jpg" alt="">
            <div class="textbox">
                <span class="time">2014-10-17</span>
                <p>sfsdfasfsdfsfasfdafsfsaf</p>
            </div>
        </div> -->
        
         
    </el-scrollbar>
    <div class="footbottom">
        <div class="biaoqing" v-if="visible">
            <emotion @emotion="handleEmotion" :height="200" ></emotion>
        </div>
        <div class="iconbox">
            <i class="el-icon-user" @click="visible=true"></i>
            <i class="el-icon-picture-outline"></i>
            <i class="el-icon-scissors"></i>
            <i class="el-icon-phone-outline"></i>
            <i class="el-icon-folder-opened"></i>
        </div>
        <el-scrollbar  style="height: 80px;">
            <chartInput ref="chatInput" v-model="editorText" @input="changeinput" @submit="msageSubmit"/>
        </el-scrollbar>
        <div class="buttonbox" style="text-align: right;">
            <el-button size="mini">关闭(C)</el-button>
            <el-dropdown size="mini" @click="msageSubmit" split-button type="primary">
                 发送(S)
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>按Enter发送消息</el-dropdown-item>
                    <el-dropdown-item>按Ctrl + Enter发送消息</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
  </div>
</template>

<script>

import { commonMixin } from "../config/mixin";
import chartInput from '../components/chatInput'
import Emotion from '../components/Emotion/index'
import API from "../api/api";
import serverUrl from '../config/client'
import { mapGetters, mapActions } from "vuex";
export default {
  name: "frend",
  mixins: [commonMixin],
  components: { chartInput ,Emotion},
//   created(){
//       this.imgurl = serverUrl
//       debugger
//   },
  data(){
    return {
        name:'',
        editorText:'',
        visible:false,
        friendId:'',
        msgList:[],
    }
  },
  created(){
        // this.name = this.getQueryString('name');
        this.name = decodeURI(this.getQueryString('name'),'UTF-8')
        this.friendId = decodeURI(this.getQueryString('id'),'UTF-8');
        // alert(this.friendId)
  },
  computed: {
    ...mapGetters(["getuserInfo"])
  },
  mounted(){
    this.getMessage();
    
  },
  methods: {
        scrollDown() {
            this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
 	    },
      //提交消息
      async submitMessage(){
          var sendID=this.getuserInfo.id
          var receiveID = this.friendId;
          var message = this.editorText;
          if(!message){
              this.$message({
                  type:'warning',
                  message:'发送内容不能为空，请重新输入'
              })
              return;
          }
          let result = await API.submitMessage({
              sendID,
              receiveID,
              message,
          });
          if(result.status==200){
              this.getMessage();
          }else {
              this.$message({
                  type:"warning",
                  message:result.msg
              })
          }
      },
      //获取消息
      async getMessage(){
          var sendID=this.getuserInfo.id
          var receiveID = this.friendId;
          let result = await API.getMessage({
              sendID,
              receiveID
          })
          if(result.status == 200){
              var user = result.data.userInfo;
              var msgList = result.data.msgList;
              for(var i=0;i<msgList.length;i++){

                  for(var j=0;j<user.length;j++){
                      if(msgList[i].sendID==user[j].id){
                          msgList[i].imgurl= serverUrl+ user[j].imgurl;
                          if(this.friendId == msgList[i].sendID){
                              msgList[i].left = true;
                          }else {
                               msgList[i].left = false;
                          }
                      }
                  }
              }
            this.msgList = msgList;
            console.log(this.msgList)
            this.$nextTick(()=>{
                this.scrollDown();
            })
            
          }else{
              this.$message({
                  type:'warning',
                  message:result.msg
              })
          }
      },
    handclickmin(){
      this.$electron.ipcRenderer.send('window-min');
    },
    handclickclose(){
      this.$electron.ipcRenderer.send('window-close');
    },
    //监听变化
    changeinput(v){
      
    },
    msageSubmit(){
        // debugger;
        var sendID=this.getuserInfo.id
        var receiveID = this.friendId;
        var message = this.editorText;
        this.submitMessage();
        // this.socket.emit("sendmessage", { id: sendID });
        var _this = this;
        this.socket.on("to"+sendID, function(data) {
            _this.getMessage();
        });
        this.socket.emit("private message", sendID, receiveID, { text: message });
        // var receiveID = this.friendId;
         

        // this.socket.on("private message", function(data) {
         
        //     console.log(data)
        //     _this.getMessage();
        // });
       
        
    },
    handleEmotion(i){
        this.content = i
        var html = this.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, this.emotion)
        var objE = document.createElement("span");
    　　 objE.innerHTML = html;
    　　 
        this.visible=false
        this.$refs.chatInput.insertHtmlAtCaret(objE.childNodes)
    },
     // 将匹配结果替换表情图片
    emotion (res) {
      let word = res.replace(/\#|\;/gi,'')
      const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
      let index = list.indexOf(word)
      return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
    },
  }
};
</script>
<style >
.el-scrollbar__wrap {
    overflow-x: hidden !important;
}
.el-scrollbar__bar {
    display: none;
}
.textbox >p >div{
    display: none !important;
}
</style>
<style lang='scss' scoped>

#frend {
    width: 100%;
    height: 100%;
    position: relative;
    .headbox {
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        border-bottom:1px solid #eee;
    }
    .conbox {
        overflow: hidden;
        padding: 5px 5px;
        img {
           float: left;
            width: 50px;
            height: 50px;
            margin: 0 10px;
        }
        .textbox {
            // float: left;
            margin-left: 70px;
            margin-right: 70px;
            span {
                display: block;
                text-align: center;
                font-size: 12px;
                color: #666;
            }
            p{
                font-size: 14px;
                line-height: 28px;
                padding: 0 5px;
                background-color: rgba($color: #92bce0, $alpha: 5);
                border-radius: 4px;
                display: inline-block;
                margin: 0;
               box-shadow: 5px 5px 5px rgba(0,0,0,.5);

                >div{
                    
                }
            }
        }
    }
    .rightbox {
        img{
            float: right;
        }
        .textbox {
            text-align: right;
            p{
                background-color: rgba($color: #7af172, $alpha: 5);
                
            }
        }
    }
    .footbottom {
        position: fixed;
        bottom: 0;
        border-top:1px solid #eee;
        width: 100%;
        .biaoqing {
            background-color: #fff;
            border-radius: 5px;
            position: absolute;
            bottom: 158px;
            left: 10px;
        }
        .iconbox {
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
            background: #fff;
            z-index: 1;
            padding: 10px 20px;
            i {
                cursor: pointer;
                padding: 0 10px;
                font-size: 18px;
            }
        }
        .buttonbox  {
            padding: 10px 10px;
        }
        // right: 0;
    }
}

</style>
